<template>
  <vTable>
    <el-form ref="form" class="mt20" :model="form" label-width="100px" slot="search" :inline="true">
      <el-form-item label="角色名称">
        <el-input size="mini" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="权限字符">
        <el-input size="mini" v-model="form.permission"></el-input>
      </el-form-item>
      <el-form-item label="角色状态">
        <el-select size="mini" v-model="form.status" placeholder="请选择活动区域">
          <el-option label="所有" value="suoyou"></el-option>
          <el-option label="正常" value="zhegchang"></el-option>
          <el-option label="停用" value="tingyong"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-date-picker size="mini" v-model="form.date" type="daterange" align="center" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" icon="el-icon-search" @click="search = !search">搜索</el-button>
        <el-button size="mini" type="primary" icon="el-icon-refresh">重置</el-button>
      </el-form-item>
    </el-form>
    <template slot="header">
      <el-button size="mini" type="primary" icon="el-icon-plus">新增</el-button>
      <el-button size="mini" type="primary" icon="el-icon-edit">修改</el-button>
      <el-button size="mini" type="primary" icon="el-icon-delete">删除</el-button>
      <el-button size="mini" type="primary" icon="el-icon-download">导出</el-button>
    </template>
    <template slot="table">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" align="right" fixed="right">
        <template>
          <el-button size="mini">编辑</el-button>
          <el-button size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </template>
  </vTable>
  <!-- <div class="app-container" v-tebleBoxH>
    <el-card class="warp-card-table" ref="table">
      <div slot="header" class="clearfix">
        <el-button icon="el-icon-search" type="primary" style="float: right;" circle @click="search = !search"></el-button>
      </div>
      <el-table ref="multipleTable" :data="tableData" :height="tebleHeight" tooltip-effect="dark" style="width: 100%">

      </el-table>
      <div class="mt20">
        <span class="demonstration">显示总数</span>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="tableData.length / 10" layout="total, prev, pager, next" :total="tableData.length">
        </el-pagination>
      </div>
    </el-card>
  </div> -->
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import vTable from "@/components/Table/index.vue";
interface forms {
  name: string;
  permission: string;
  status: string;
  date: string;
}
@Component({
  name: "User",
  components: { vTable }
})
export default class extends Vue {
  private search: boolean = true;
  private boxHeight: number = 0;
  private searchHeight: number = 0;
  private form: forms[] = [];

  private pickerOptions: Object = {
    disabledDate(time: any) {
      return time.getTime() > Date.now();
    },
    shortcuts: [
      {
        text: "今天",
        onClick(picker: any): void {
          picker.$emit("pick", new Date());
        }
      },
      {
        text: "昨天",
        onClick(picker: any): void {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24);
          picker.$emit("pick", date);
        }
      },
      {
        text: "一周前",
        onClick(picker: any): void {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit("pick", date);
        }
      }
    ]
  };
  private tableData: any = (function() {
    var arr = [];
    for (let index = 0; index < 50; index++) {
      arr.push({
        date: "2016-05-03",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄"
      });
    }
    return arr;
  })();

  private currentPage1: Number = 1;
  handleSizeChange(val: any): void {
    console.log(`每页 ${val} 条`);
  }
  handleCurrentChange(val: any): void {
    console.log(`当前页: ${val}`);
  }

  mounted() {}

  watch = {};
}
</script>

<style lang="scss" scoped>
.mt20 {
  margin-top: 20px;
}
.app-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .warp-card-search {
    height: auto;
    transition: height 1s;
    -moz-transition: height 1s; /* Firefox 4 */
    -webkit-transition: height 1s; /* Safari 和 Chrome */
    -o-transition: height 1s; /* Opera */
    // margin-bottom: 20px;
  }
  .warp-card-table {
    flex: 1;
  }
}
</style>
